<template>
    <div class="login-page">
      <!-- 顶部导航栏 -->
      <NavBar navbarTitle="登录"></NavBar>
      <!-- 页面主体内容区 -->
      <div class="page-content">
        <div class="content-logo">
          <img class="logo-img" src="/src/assets/images/logo/XCJSLogo3.png" alt="">
        </div>
        <!-- 登录表单区域 -->
        <div class="content-form">
          <div class="form-item">
            <div class="item-icon">
              <SvgIcon name="user" width="1.2em" height="1em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" type="text" v-model="loginForm.usernameOrPhone" placeholder="请输入用户名或手机号">
          </div>
          <div class="form-item">
            <div class="item-icon" @click="showOrHiddenPwd">
              <SvgIcon :name="showPwd ? 'eye-o' : 'eye-c'" width="1.1em" height="1.1em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" :type="showPwd ? 'text' : 'password' " v-model="loginForm.password" placeholder="请输入密码">
          </div>
          <div class="form-item captcha-code">
            <div class="item-icon">
              <SvgIcon name="verificationCode" width="1.1em" height="1.1em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" type="text" v-model="loginForm.captchaCode" placeholder="请输入验证码">
            <!-- 验证码图片 -->
            <img class="item-captcha-code" :src="loginForm.imageBase64Url" @click="changeCaptcheImg" alt="验证码" title="验证码">
          </div>
          <!-- 提示 -->
          <div class="form-tip">
            <span class="tip-left" @click="goRegister_btn">没有账号?去注册</span>
            <span class="tip-right" @click="forgetPassword_btn">忘记密码?</span>
          </div>
        </div>
        <!-- 用户协议及登录按钮区域 -->
        <div class="content-login">
          <div class="login-btn">
            <van-button class="btn-item" type="primary" @click="signIn_btn">登录</van-button>
          </div>
          <div class="login-agreement">
            <van-checkbox v-model="noticeOfConsent"><span class="agreement-tip">您已阅读并同意</span><span class="agreement-text">《星辰集市用户服务协议》《隐私权政策》《软件许可使用协议》</span></van-checkbox>
          </div>        
        </div>
        <!-- 其它登录方式 -->
        <div class="other-login">
          <div class="login-title">
            <span class="title-tip">其它登录方式</span>
          </div>
          <div class="login-box">
            <SvgIcon name="weixin" width="1rem" height="1rem"></SvgIcon>
            <SvgIcon name="qq" width="1rem" height="1rem"></SvgIcon>
            <SvgIcon name="huawei" width="1rem" height="1rem"></SvgIcon>
            <SvgIcon name="iphone" width="1rem" height="1rem"></SvgIcon>
            <SvgIcon name="xianyu" width="1rem" height="1rem"></SvgIcon>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar/NavBar.vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
//引入vant组件
import { Checkbox as VanCheckbox, Button as VanButton, showFailToast, showToast } from "vant";
//引入vue
import { ref, onMounted } from "vue";
//引入vue-router
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
//@ts-ignore引入用户仓库
import { useUserStore } from "@/store/userStore.ts";
const userStore = useUserStore();
//@ts-ignore引入请求函数
import { reqCaptchaImgCode } from "@/api/login/index.ts";
import { reactive } from 'vue';

//登录表单信息
const loginForm = reactive({
  usernameOrPhone:"",  //用户输入用户名或手机号
  password:"",  //用户密码
  captchaCode:"",  //用户输入验证码
  imageBase64Url:"",  //验证码图片地址
});
//是否勾选阅读同意须知
let noticeOfConsent = ref(false);
//展示svg图标 眼睛开|眼睛闭
let showPwd = ref(false);

//显示或隐藏密码事件
function showOrHiddenPwd () {
  showPwd.value = !showPwd.value;
}
//点击注册，跳转到注册页
function goRegister_btn () {
  router.push("/register");
}
//忘记密码?跳转到密码修改页
function forgetPassword_btn () {
  router.push("/forget");
}

//点击验证码图片更换验证码
let timer:any = null;
function changeCaptcheImg () {
  if(timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    //请求验证码图片
    getCaptchaImgCode();
  },500)
}

//点击登录按钮事件
async function signIn_btn () {
  //用户是否勾选同意须知
  if(!noticeOfConsent.value) return showToast("请勾选用户同意须知!");
  const userInfoForm = {username:"",phone:"",password:"",captchaCode:""};  //参数准备
  if(loginForm.usernameOrPhone.length === 11 && Number(loginForm.usernameOrPhone)) {
    //初步判断为手机号 + 密码 + 验证码 登录
    userInfoForm.phone = loginForm.usernameOrPhone;
  } else {
    //用户名 + 密码 + 验证码 登录
    userInfoForm.username = loginForm.usernameOrPhone;
  }
  userInfoForm.password = loginForm.password;
  userInfoForm.captchaCode = loginForm.captchaCode;
  //对参数进行校验
  if(userInfoForm.username.trim() === "" && userInfoForm.phone.trim() === "") return showToast("请输入用户名或手机号!");
  if(userInfoForm.password.trim() === "") return showToast("请输入密码!");
  if(userInfoForm.captchaCode.trim() === "") return showToast("验证码不能为空!");
  //调用仓库登录api
  let isLoginSuccess = await userStore.userLogin(userInfoForm);  //返回布尔值确定是否登录成功
  if(!isLoginSuccess) return;  //未登录成功 退出本函数
  let redirect:any = route.query.redirect;
  //跳转到 首页 或者 redirect = ?
  if(redirect === undefined || redirect === "") {
    router.push("/home");
  } else {
    //console.log(redirect);
    router.push(redirect);
  }
}

//获取登录验证码
async function getCaptchaImgCode () {
  let res = await reqCaptchaImgCode ();
  let url = "";
  let imageBase64 = ""
  if(res.code === 200) {
    //base64图片验证码获取成功
    if(!res.data.includes("data:image/png;base64,")){
      imageBase64 = "data:image/png;base64," + res.data;
    } else {
      imageBase64 = res.data;
    }
    //url = window.URL.createObjectURL(new Blob([imageBase64],{type:"image/png"}));  //转换成图片地址

    //将base64字符串转换为Blob对象
    let byteCharacters = atob(imageBase64.split(",")[1]);
    let byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    let byteArray = new Uint8Array(byteNumbers);
    let blob = new Blob([byteArray], { type: 'image/png' }); // 根据实际图片格式设置type
    url = URL.createObjectURL(blob);
  }
  loginForm.imageBase64Url = url;
  console.log('图片验证码接口api',res);
  // console.log(imageBase64, url);
}

//vue生命周期
onMounted(() => {
  //获取登录验证码
  getCaptchaImgCode();
})
</script>

<style lang="less" scoped>
.login-page{
  width: 375px;
  height: 100vh;

  .page-content{
    width: 375px;
    height: calc(100vh - 46px);
    position: relative;
    top:47px;
    overflow: scroll;

    /**商城logo部分 */
    .content-logo{
      width: 140px;
      height: 140px;
      margin: 10px auto;
      display: flex;
      justify-content: center;
      .logo-img{
        height: 140px;
      }
    }
    /**登录表单区域 */
    .content-form{
      width: 360px;
      height: 200px;
      margin: 20px auto;
      border-radius: 5px;
      /**表单项 */
      .form-item{
        width: 320px;
        height: 40px;
        padding: 0 5px;
        margin: 15px auto 0 auto;
        box-sizing: border-box;
        border-bottom: 1px solid #ece9e9;
        // background: #efefef;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-input{
          width: 270px;
          height: 30px;
          border: none;
          font-size: 16px;
          color: #9195a3;
          
          &::placeholder{
            font-size: 14px;
            color: #c7c5c5;
          }
        }
      }
      /**表单项-带验证码 */
      .captcha-code{
        width: 320px;
        height: 40px;
        padding: 0 5px;
        margin: 15px auto 0 auto;
        box-sizing: border-box;
        border-bottom: 1px solid #ece9e9;
        // background: #efefef;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-input{
          width: 150px;
          height: 30px;
          border: none;
          font-size: 16px;
          color: #9195a3;
          
          &::placeholder{
            font-size: 14px;
            color: #c7c5c5;
          }
        }
        .item-captcha-code{
          width: 110px;
          height: 30px;
          cursor: pointer;
        }
      }
      /**提示部分 */
      .form-tip{
        width: 320px;
        height: 20px;
        margin: 3px auto;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tip-left{
          font-size: 12px;
          color: #000;
          cursor: pointer;
        }
        .tip-right{
          font-size: 12px;
          color: #000;
          cursor: pointer;
        }
      }
    }
    /**用户协议及登录按钮区域 */
    .content-login{
      width: 375px;
      margin: 0 auto;
      padding: 10px;
      box-sizing: border-box;
      .login-agreement{
        margin-top: 15px;
        width: 355px;
        height: 15px;
        font-size: 10px;
        color: #c7c5c5;
        .agreement-tip{
          color: #9195a3;
        }
        .agreement-text{
          color: #3b3b3b;
        }
      }
      .login-btn{
        width: 355px;
        .btn-item{
          width: 355px;
          height: 40px;
        }
      }
    }
    /**其它登录方式 */
    .other-login{
      width: 300px;
      height: 80px;
      margin: 28px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .login-title{
        position: relative;
        font-size: 12px;
        color: #c7c5c5;
        &::before{
          content: " ";
          width: 30px;
          height: 1px;
          position: absolute;
          top:7px;
          left: -50%;
          background: #c7c5c5;
        }
        &::after{
          content: " ";
          width: 30px;
          height: 1px;
          position: absolute;
          top:7px;
          left: 110%;
          background: #c7c5c5;
        }
      }
      .login-box{
        width: 250px;
        height: 35px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
}
</style>